<template>
	<view>
		<!-- #ifdef H5 || MP-WEIXIN -->
		  <uni-nav-bar @clickRight="clickRight" @clickLeft="back" showMenuButtonWidth :statusBar="true" :border="false" :fixed="true" left-icon="left" left-text="返回" right-text="缴费记录" title="生活缴费" />
		<!-- #endif -->
 
	 
		<view class="pay_money">
				<picker range-key="houseName" @change="bindPickerHouseChange"   :range="houses">
				<view class="address">
					{{checkHouse.houseName}}
				<text class="iconfont icon-xiajiantou1 icon"></text>  
				</view>
				</picker>
				<view class="img">
					<view class="money">应缴费:{{sum}}</view>
					<view class="btn" @click="payment">缴 费</view>
				</view>
				
				
				<view v-for="item in feeList" :key="item.id" class="bill">
					<view class="tit">{{item.type}}账单</view>
					<view class="news"><text>房号</text><text>{{item.houseno}}</text></view>
					<view class="news"><text>账单</text><text>{{item.begindate}} 至 {{item.enddate}}</text></view>
					<view class="news"><text>账单金额</text><text>￥{{item.price}}元</text></view>
				</view>
				
				
			</view>
		  
	</view>
</template>

<script>
	import {getCheckHouse,getFeeList} from '../../service/houses.js'
	export default {
		data() {
			return {
			  checkHouse:{},
			  houses:[],
			  feeList:[],
			  params:{houseid:null,page:1,psize:10}
			};
		},
		onLoad() {
			this.getHouses();
		},
		computed:{
			sum(){
				
				return this.feeList.reduce((pre,cur)=>pre+cur.price,0);
				
				// let s=0;
				// this.feeList.forEach(item=>{
				// 	s+=item.price;
				// })
				// return s;
			}
			
		},
		methods:{
			
			//选择房间
			bindPickerHouseChange(e){
				console.log(e);
				
						 this.checkHouse=this.houses[e.detail.value];
						 this.getFee();
				
			},
			async getFee(){
			
				this.params.houseid= this.checkHouse.houseid;
				const feeRes=await getFeeList(this.params);
				if(!feeRes) return;
				
				this.feeList=feeRes.list;
			},
		  async	getHouses(){
			  
			  uni.showLoading({
			  	title:'加载中...'
			  })
			  
			  const res=await getCheckHouse().catch(()=>undefined);
			  if(!res) return;
			  
			  this.houses=res.list;
			  
			  
			  uni.hideLoading();
			  
			 //  //没有房屋 跳到房屋认证页面
			  if(this.houses.length===0){
				return  uni.redirectTo({
				  	url:'/pages/house/certification'
				  })
			  }
			  //如果有等待认证的房屋，跳到等待认证页面
			  
			 let isCheck=  this.houses.some(item=>item.state===1);
			 
			  if(isCheck){
				return  uni.redirectTo({
				  	url:'/pages/house/certificationChecking'
				  })
			  }
			  
			  this.houses=this.houses.map((item)=>({houseid:item.houseid,houseName:item.building+item.houseno}))
			 console.log("处理后的",	this.houses);
			 	this.checkHouse=this.houses[0];
			 //获取 费用
			 this.getFee();
			
		 
				
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			clickRight(){
				console.log("点击了右边按钮");
			}
		},
		onNavigationBarButtonTap(e){
			
			console.log("点击了右边按钮");
			console.log(e);
			
		}
	}
</script>
<style lang="less">
	
	.pay_money{
		padding: 0 11rpx;
		box-sizing: border-box;
	    // height: 100vh;
		margin-bottom: 11rpx;
		.address{
			line-height: 93rpx;
			font-size: 28rpx;
			color: black;
			margin-left: 17rpx;
			.icon{
				margin-left: 10rpx;
				font-size: 33rpx;
				color: #080808;
			}
		}
		.img{
		
			width: 100%;
			height: 325rpx;
			background: url('/static/images/pay_money_bg.png') no-repeat;
			background-size: 100% 100%;
			.money{
				text-align: center;
				font-size: 40rpx;
				color: #fff;
				line-height: 206rpx;
			}
			.btn{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 285rpx;
				height: 85rpx;
				background-color: #fff;
				border-radius: 45rpx;
				font-size: 31rpx;
				color: #009fef;
				margin: 0 auto;
			}
		}
		.bill{
			width: 100%;
			height: 330rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin-top: 20rpx;
			padding: 0 34rpx;
			box-sizing: border-box;
			.tit{
				font-size: 25rpx;
				color: #2b2b2b;
				line-height: 75rpx;
				border-bottom: 1rpx solid #fafafa;
				margin-bottom: 40rpx;
			}
			.news{
				display: flex;
				justify-content: space-between;
				font-size: 22rpx;
				color: #2b2b2b;
				margin-bottom: 40rpx;
			}
		}
	}
</style>